<template>
  <div class="col-xl-8 bg-white q-mb-xl border-radius-3 relative-position" :class="{'q-pa-md shadow-light': $q.screen.gt.md}">
    <a-loading :visible="!statistic"></a-loading>
    <div v-if="statistic">
      <div class="q-pt-lg q-pb-md q-px-lg">
        <div class="row">
          <div class="col"><a-head :user="statistic.user" :size="48" level :popover="false"></a-head></div>
          <div v-if="auth && auth.id !== parseInt(id)">
            <q-chip dense square color="blue-1" text-color="primary" class="size-12">
              <span v-if="followRelation === 3">相互关注</span>
              <span v-else-if="followRelation === 2">他关注你</span>
            </q-chip>
          </div>
        </div>
        <div class="size-14 q-mt-sm">
          <span class="q-mx-sm">{{ statistic.recommend_number }}次推荐</span>
          <span class="q-mx-sm">{{ statistic.up_count }}次点赞</span>
          <span class="q-mx-sm">{{ statistic.followed_number }}人关注</span>
          <span class="q-mx-sm">{{ statistic.collect_number  }}次收藏</span>
        </div>
        <div class="row justify-between q-my-md" v-if="auth && auth.id !== parseInt(id) && followRelation !== null">
          <div class="col-6 q-pr-sm">
            <q-btn outline color="primary" class="full-width" @click="follow" :disabled="loading">
              <span v-if="!followRelation || followRelation === 0 || followRelation === 2">关注</span>
              <span v-else>取消关注</span>
            </q-btn>
          </div>
          <div class="col-6 q-pl-sm">
            <q-btn outline color="primary" class="full-width" @click="openMessageDialog">私信</q-btn>
          </div>
        </div>
      </div>
      <!--<div class="q-my-sm q-py-sm q-px-lg border-top-1">-->
        <!--<div class="q-my-sm q-pa-md">-->
          <!--<q-btn color="primary" rounded class="button-tag">泰山</q-btn>-->
          <!--<q-btn color="primary" rounded class="button-tag">青城</q-btn>-->
          <!--<q-btn color="primary" rounded class="button-tag">武当</q-btn>-->
          <!--<q-btn color="primary" rounded class="button-tag">九华</q-btn>-->
          <!--<q-btn color="primary" rounded class="button-tag">普陀</q-btn>-->
        <!--</div>-->
      <!--</div>-->
      <div class="q-py-md">
        <div>
          <q-tabs color="white" text-color="primary" class="border-bottom-1">
            <q-route-tab :to="getRoute('map')" label="地图" :count="statistic.map_number"/>
            <!--<q-route-tab slot="title" :to="getRoute('share')" label="协作"/>-->
            <q-route-tab :to="getRoute('forum')" label="讨论" :count="statistic.forum_number"/>
            <q-route-tab :to="getRoute('follower')" label="关注" :count="statistic.follow_number"/>
            <q-route-tab :to="getRoute('followed')" label="被关注" :count="statistic.followed_number"/>
          </q-tabs>
          <div class="q-pa-md">
            <router-view :id="id"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'aUserIndex',
      props: {
        id: {
          type: [String, Number],
          required: true
        }
      },
      data () {
        return {
          statistic: null,
          followRelation: null,
          loading: false
        }
      },
      created () {
        this.getStatistic()
      },
      watch: {
        id () {
          this.getStatistic()
        }
      },
      methods: {
        openMessageDialog () {
          this.$root.$emit('openMessageDialog', this.statistic.user)
        },
        async follow () {
          const { status, data } = await this.postRequest({
            api: '/api/user/follow/',
            data: { user_id: this.id }
          })

          if (status === 200) {
            this.followRelation = data.relation
          } else {
            this.$q.notify('发生未知错误，请重试！')
          }
        },
        async getStatistic () {
          const { status, data } = await this.getRequest({
            api: '/api/user/{id}/statistic/',
            id: this.id || this.auth.id,
            instance: 'statistic'
          })

          if (status === 200) {
            this.followRelation = data.relation
          }
        },
        getRoute (type) {
          const id = this.id
          if (id) {
            return `/people/${id}/${type}/`
          } else {
            return type
          }
        }
      }
    }
</script>

<style lang="stylus">
</style>
